import React, { Component } from 'react';

export default class Count extends Component {


    // 有了actionCreator ， 我们就不需要自己再去定义action了
    increment = () => {
        const { value } = this.countNum;
        this.props.increment(value * 1)
    }

    decrement = () => {
        const { value } = this.countNum;
        this.props.decrement(value * 1)
    }

    incrementIfOdd = () => {
        const { value } = this.countNum;
        if (this.props.count % 2 === 1) {
            this.props.increment(value * 1)
        }
    }


    incrementAsync = () => {
        const { value } = this.countNum;
        this.props.incrementAsync(value*1,500)
    }

    render() {
        return (
            <div>
                <h2>总数为： {this.props.count}</h2>
                <select ref={a => this.countNum = a}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>add if odd</button>&nbsp;
                <button onClick={this.incrementAsync}>add async</button>&nbsp;
            </div>
        )
    }
}